<template>
    <div>
       <van-cell v-for="(item, index) in suggestion" :key="index" @click="onSearch(item)">
        <template #title>
            <van-icon name="search"></van-icon>
            <span v-html="hrightline(item)"></span>
        </template>
    </van-cell>
     
    </div>
</template>    

<script setup>
import { useUsersStore3 } from "../../store/search"
import { storeToRefs } from "pinia"
import { watch, reactive, toRefs } from "vue"
import axios from "axios"


let store = useUsersStore3()
let { searchValue } = storeToRefs(store)
let ress = reactive({
    suggestion: []
})
let { suggestion } = toRefs(ress)

watch(searchValue, (news, olds) => {
    getSearchSuggestion(news)
}, {
    immediate: true
})

//获取联想建议列表
function getSearchSuggestion(q) {
    axios.get("/suggestion", { params: { q } }).then((res) => {
        // console.log(res)
        ress.suggestion = res.data.list
    })
}
//搜索关键字高亮
function hrightline(val) {
    const heightRed = `<span style="color: red">${store.searchValue}<span>`
    let reg = new RegExp(store.searchValue, 'gi')
    return val.replace(reg, heightRed)
}
//点击
function onSearch(val) {
    store.Searchclick(val)
}
</script>